<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 50% }
</style>

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="/includes/js/googleUtils.js"></script>
<script type="text/javascript">
    
    var map;
    var markersArray = [];
    var coordenadasRuta = [];
    //var image = 'beachflag.png'; cambiar la imagen
    
  function initialize() {
    var latlng = new google.maps.LatLng(-33.042023,-71.591133);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        downloadUrl("conexionBD.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              //coordenadasRuta.push(point);
              //var html = "<b>" + name + "</b> <br/>" + address;
              //var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point
              //  icon: icon.icon,
              //  shadow: icon.shadow
              });
              addMarker(marker,name);
              //bindInfoWindow(marker, map, infoWindow, html);
            }
        });
        
        /*GDownloadUrl("conexionBD.php", function(data) {
            var xml = GXml.parse(data);
            //var markers = xml.documentElement.getElementsByTagName("marker");
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
                //addMarker(point,name);//, name, address, type);
                coordenadasRuta.push(point);
            }
        });*/
        
        //for (var i = 0; i < markersArray.length; i++) {
        
        //var flightPlanCoordinates = [ markersArray[0].getAttribute("position"),markersArray[1].getAttribute("position")];
        /*}[
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892)
        ];*/
        //DESMARCAR
        var miruta = new google.maps.Polyline({
            path: coordenadasRuta,
            strokeColor: "#FFFFFF",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        miruta.setMap(map);
        
  }
  
       function downloadUrl(url,callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
              if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
              }
            };

            request.open('GET', url, true);
            request.send(null);
       }
    
    function addMarker(location,ruta) {
        marker = new google.maps.Marker({
            position: location,
            title: ruta,
            map: map
        });
        markersArray.push(marker);
    }

// Removes the overlays from the map, but keeps them in the array
    function clearOverlays() {
      if (markersArray) {
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
      }
    }

// Shows any overlays currently in the array
    function showOverlays() {
      if (markersArray) {
        for (i in markersArray) {
          markersArray[i].setMap(map);
        }
      }
    }

// Deletes all markers in the array by removing references to them
    function deleteOverlays() {
      if (markersArray) {
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
        markersArray.length = 0;
      }
    }
    
    function doNothing() {}    
    
  

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>